<template>
	<view class="page">
		<view  class="swiperTitle">
			<input v-model="inputvalue" @input="handleInput" class="swiperTitle-input" @confirm="doSearch"
			 placeholder="请输入想找的货源关键字搜索"/>
			<label class="swiperTitle-lable"  @click="goToPage()">搜索</label>
		</view>
		<view class="split">
			<view class="split1">
				<view class="title1">
					<label class="title-item3">历史搜索</label>
				</view>
				<view class="title" v-for=" item in tabHistoryList ">
					<label class="title-item2" @click="clickInput(item)">{{item}}</label>
				</view>
			</view>
			<view class="split2"></view>
			<view class="split1">
				<view class="title0">
					<label class="title-item1">大家都在搜</label>
				</view>
				
				<view class="title" v-for=" item in tabList ">
					<label class="title-item2" @click="clickInput(item)">{{item}}</label>
				</view>
			</view>
		</view>
		 
		 
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:0,
				tabHistoryList:[],
				tabList:[],
				value:""
				
			}
		},
		onLoad(options) {
			this.tab=options.tab;
			if(this.tab ==1){
				this.tabHistoryList=["娃娃菜","小辣椒","胡萝卜","大白菜"]
			}else{
				this.tabHistoryList=["娃娃菜","小辣椒","胡萝卜","大白菜"]
				this.tabList=["娃娃菜","小辣椒","胡萝卜","大白菜","菜心","猕猴桃","苹果"]
			}
			this.tabHistoryList=["娃娃菜","小辣椒","胡萝卜","大白菜"]
			this.tabList=["娃娃菜","小辣椒","胡萝卜","大白菜","菜心","猕猴桃","苹果"]
		},
		methods: {
			clickInput(item){
				this.value = item;
				this.goToPage()
			},
			goToPage() {
				 
				  // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				  let pages = getCurrentPages() 
				  // 2. 上一页面实例
					// 注意是length长度，所以要想得到上一页面的实例需要 -2
					// 若要返回上上页面的实例就 -3，以此类推
				  let prevPage = pages[pages.length -2] 
				  // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				  prevPage.getValue(this.value) 
			
				  uni.navigateBack();
			},
			doSearch(){
				//显示搜索结果
				this.goToPage()
			},
			handleInput({ detail }) {
				this.value = detail.value;
			}
		}
	}
</script>

<style>
	.split{
		display: flex;
		margin-top: 20px;
		
	}
	.split1{
		flex: 1;
		margin-left: 10px;
		margin-right: 10px;
		 
	}
	.split2{
		flex: 0.1;
		max-width: 1px;
		margin-top: 60px;
		border-right: 1px solid #eee;
	}
	.page{
		background-color: #fff;
		margin:0px 10px 0px 10px;
		
	}
	.bg999{
		background-color: #999999;
	}
	 .swiperTitle{
		height: 32px;
		line-height: 32px;
		display: flex; 
		top: 10px;
		right: 15px;
		left: 15px;

	 }
	 .swiperTitle-lable{
		color: rgba(255, 255, 255, 1);
		background-color: rgba(67, 207, 124, 1);;
		text-align: center;
		flex: 1.5;
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		margin-top: 2px;
		z-index: 1;
	 }
	 
	 .swiperTitle-input {
		padding-left: 10px;
		height: 34px;
		line-height: 34px;
	 	border-radius: 5px;
		font-size: 15px;
	 	background: #eee;
		color:black;
		flex: 9.5;
		margin-right: -60px;
		 
	 }
	 .input-placeholder{
	 		font-size: 11px;
	 		font-weight: 400;
	 		letter-spacing: 0px;
	 		line-height: 16px;
	 
	 		text-align: left;
	 }
	 
	 .title0{
	 	display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom,#d3959b,#fff);
		border-radius: 4px;
		height: 40px;
		 
		 
	 	 
	 }
	 .title1{
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom,#bfe6ba,#fff);
		border-radius: 4px;
		height: 40px;
		 
	 	 
	 }
	 
	 .title{
	 	display: flex;
	 		 
	 	 
	 }
	 .title-item1{
		margin-left: 10px;
	 	margin-top: 15px;
	 	font-size: 15px !important;
	 	font-weight: 700;
	 	letter-spacing: 0px;
	 	line-height: 16px;
	 	color: rgba(212, 49, 49, 1);
	 	flex: 1;
	 	text-align: center;
	 	font-weight: bold;
	 }
	 .title-item3{
	 	margin-left: 10px;
	 	margin-top: 15px;
	 	font-size: 15px !important;
	 	font-weight: 700;
	 	letter-spacing: 0px;
	 	line-height: 16px;
	 	color: black;
	 	flex: 1;
	 	text-align: center;
	 	font-weight: bold;
	 }
	 .title-item2{
	 	flex: 1;
	 	text-align: center;
	 	margin-top: 15px;
		font-size: 15px;
		font-weight: bold;
	 }
</style>
